<template>
	<view>
		<Header :showBack="true" title="填写订单"></Header>
		
		<view @click="chooseAddress" class="address">
			<view>{{address}}</view>
			<image src="../../static/img/go.png" mode=""></image>
		</view>
		
		<view class="info">
			<!-- <view>
				<view>送达时间</view>
				<view></view>
			</view> -->
			
			<view>
				<scroll-view scroll-x="true" >
					<view class="item">
						<image v-for="(item,index) in items" :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item.imgUrl" mode="" :key="item.id"></image>
					</view>
				</scroll-view>
				<view>
					共{{num}}件
					<!-- <image src="../../static/img/go.png" mode=""></image> -->
				</view>
			</view>
		</view>
		
		<view class="price">
			<view>商品金额</view>
			<view>￥{{price}}</view>
		</view>
		
		<view class="buy">
			<view>
				实付 <text style="color: #ff4040;font-size: 32upx;font-weight: 500;">
					<text style="font-size: 20upx;">￥</text>
					{{price}}
				</text>
			</view>
			<view @click="pay">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address:'',
				name:'',
				phone:'',
				baseUrl:getApp().globalData.baseUrl,
				num:0,
				price:0,
				items:[]
			}
		},
		onLoad(e) {
			this.num = e.num
			this.price = e.price
			this.items = JSON.parse(e.items)
		},
		onShow() {
			this.getAddress()
		},
		methods: {
			pay(){
				if(this.address == '请选择收货地址'){
					uni.showToast({
						icon:'none',
						title:'请先添加收货地址'
					})
					return;
				}
				let list = this.items.map((item)=>{
					return item.id
				})
				this.$http('/member/api/mall/createMallOrder',{
					 "shopingCartIds":list,
					  "appId":getApp().globalData.appId,
					  "openId":uni.getStorageSync('openId'),
					  "tenantId":uni.getStorageSync('tenantId'),
					  "mId":this.address,
					  "name":this.name,
					  "phone":this.phone
				},res=>{
					this.$http('/pay/api/pay/pay',res.data,pay=>{
						uni.requestPayment({
						    provider: 'wxpay',
						    timeStamp: pay.data.timeStamp,
						    nonceStr: pay.data.nonceStr,
						    package: pay.data.package,
						    signType: pay.data.signType,
						    paySign: pay.data.paySign,
						    success: function (res1) {
						        uni.reLaunch({
						        	url:'/pages/shopMall/shopMall'
						        })
						    },
						    fail: function (err) {
								uni.reLaunch({
									url:'/pages/shopMall/shopMall'
								})
						    }
						});
					})
				})
			},
			chooseAddress(){
				uni.navigateTo({
					url:'/pages/shopMall/address'
				})
			},
			getAddress(){
				this.$http('/member/api/mall/getOwnerAddressList',{
					 "condition":{}
				},res=>{
					if(res.data.items.length>0){
						let flag = true
						for(let i = 0;i<res.data.items.length;i++){
							if(res.data.items[i].isDefault){
								this.address = res.data.items[i].mId
								this.name = res.data.items[i].name
								this.phone = res.data.items[i].phone
								flag = false
								break;
							}
						}
						if(flag){
							this.address = res.data.items[0].mId
							this.name = res.data.items[0].name
							this.phone = res.data.items[0].phone
						}
					}else{
						this.address = '请选择收货地址'
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
.tongyong(){
	width: 100%;
	background-color: #FFFFFF;
	margin-top: 20upx;
}
.address{
	.tongyong;
	height: 130upx;
	position: relative;
	>view{
		padding-left: 20upx;
		width: 80%;
		height: 130upx;
		line-height: 130upx;
		font-weight: 500;
		font-size: 32upx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	>image{
		width: 40upx;
		height: 40upx;
		position: absolute;
		right: 20upx;
		top: 50%;
		margin-top: -25upx;
	}
}
.info{
	.tongyong;
	height: 200upx;
	>view{
		width: 100%;
		display: flex;
		height: 100%;
		scroll-view{
			width: 600upx;
			height: 100%;
			padding-left: 20upx;
			view.item{
				display: flex;
				align-items: center;
				height: 100%;
				>image{
					width: 120upx;
					height: 120upx;
					margin: 0 15upx;
					flex-shrink:0;
				}
			}
		}
		>view{
			box-sizing: border-box;
			padding-right: 20upx;
			width: 150upx;
			font-size: 26upx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #888888;
			>image{
				width: 26upx;
				height: 26upx;
			}
		}
	}
}
.price{
	.tongyong;
	height: 90upx;
	line-height: 90upx;
	display: flex;
	box-sizing: border-box;
	padding: 0 20upx;
	justify-content: space-between;
	align-items: center;
	font-size: 30upx;
	color: #666666;
}
.buy{
	.tongyong;
	position: fixed;
	bottom: 0;
	height: 180upx;
	display: flex;
	box-sizing: border-box;
	padding-top: 20upx;
	justify-content: flex-end;
	padding-right: 20upx;
	>view:first-child{
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: #888888;
	}
	>view:last-child{
		width: 230upx;
		height: 80upx;
		background-color: #ff4040;
		color: #FFFFFF;
		line-height: 80upx;
		border-radius: 40upx;
		text-align: center;
		font-size: 28upx;
		margin-left: 20upx;
	}
}
</style>
